<template>
    <h1>整合TS--prop传参</h1>
    <div class="container">
        <!-- {{ a }} -->
        <ul>
            <li v-for="item in list" :key="item.id">
                {{ item.name }} -- {{ item.age }} 
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { defineProps,withDefaults } from 'vue';
import {type Persons } from '@/types';
// defineProps(['list'])//第一种简单写法, 可以直接用 

let {list} = defineProps(['list']) //第二种写法

// defineProps<{list:Persons}>()  //第三种写法 限制类型

// 第四种,限制类型 限制必要性(?) 指定默认值(withDefaults) 注释app.vue中的tx_prop 查看效果
// withDefaults(defineProps<{list?:Persons}>(),{
//     list:()=>[{
//         id:'asdasd',
//         name:'张三',
//         age:18
//     }]
// }) 


</script>

<style scoped>
    .container{
        background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>